<extend name="Base/base" />
<block name="body">
<div style="margin-top:50px;">
  <if condition="$error">
  <div class="control">
    <div style="padding:10px; text-align:center;" class="tile red-pale text-tint">{$error}</div>
  </div>
  </if>
  <form class="box" action="#" method="post">
    <div class="control flex">
      <input name="mobile" id="mobile" type="text" class="input" placeholder="手机号" value="{$mobile}">
    </div>
    <div class="control flex">
      <input name="username" type="text" class="input" placeholder="姓名">
    </div>
    <div class="control flex">
      <input name="vcode" type="text" class="input" placeholder="验证短信" style="width:50%;">
      <button type="button" id="btnSendCode" class="btn primary" onclick="sendMessage()">发送短信</button>
    </div>
    <div class="control flex">
      <input name="password" type="password" class="input" placeholder="登录密码">
    </div>
    <div class="control flex">
      <input name="repassword" type="password" class="input" placeholder="确认密码">
    </div>
    <div class="control flex">
      <input name="staff_code" type="text" class="input" placeholder="邀请推荐">
    </div>
    <div class="control">
      <button type="submit" class="btn primary block">立即申请</button>
    </div>
  </form>
</div>
<script>
var InterValObj; //timer变量，控制时间 
var count = 30; //间隔函数，1秒执行 
var curCount;//当前剩余秒数 

function sendMessage() { 
  curCount = count; 
  //设置button效果，开始计时 
  $("#btnSendCode").attr("disabled", "true"); 
  $("#btnSendCode").html(curCount + "秒后可重新发送"); 
  InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
  //请求后台发送验证码 TODO 
  var mobile = $('#mobile').val();
  $.ajax({
    url: '/wap/public/send_vcode',
    type: 'post',
    dataType: 'json',
    data: {'mobile': mobile},
    success: function(res) {
      console.log(res);
    }
  });
} 

//timer处理函数 
function SetRemainTime() { 
  if (curCount == 0) {         
    window.clearInterval(InterValObj);//停止计时器 
    $("#btnSendCode").removeAttr("disabled");//启用按钮 
    $("#btnSendCode").html("重新发送验证码"); 
  } 
  else { 
    curCount--; 
    $("#btnSendCode").html(curCount + "秒后可重新发送"); 
  } 
} 
</script>
</block>
<block name="footer">
</block>
